<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button v-auth="'system:notice:add'" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
                <el-button v-auth="'system:notice:remove'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0" @click="batchDel">删除</el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.title" placeholder="请输入标题" clearable></el-input>
					<sc-select v-model="search.noticeType" dict="notice_type" placeholder="请选择公告类型" style="width: 100%;" clearable></sc-select>
                    <el-button v-auth="'system:notice:page'" type="primary" icon="el-icon-search" @click="upSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="dataList" row-key="id" @selection-change="selectionChange"  stripe remoteSort remoteFilter>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="类型" prop="noticeType" align="center" width="150">
					<template #default="scope">
						<p v-if="scope.row.noticeType==='10'">通知</p>
						<p v-if="scope.row.noticeType==='20'">公告</p>
					</template>
				</el-table-column>
				<el-table-column label="标题" prop="title" align="center" width="150"></el-table-column>
                <el-table-column label="状态" prop="status" align="center" width="150">
					<template #default="scope">
						<el-tag v-if="scope.row.status==='0'" type="danger">草稿</el-tag>
						<el-tag v-if="scope.row.status==='1'" type="success">发布</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="备注" prop="remark" align="center" min-width="150"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="center" width="150"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="180">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="tableShow(scope.row, scope.$index)">
                                查看
                            </el-button>
                            <el-button v-auth="'system:notice:edit'" text type="primary" size="small" @click="tableEdit(scope.row, scope.$index)">
                                编辑
                            </el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button v-auth="'system:notice:remove'" text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="refreshTable" @closed="dialog.save=false"></save-dialog>

</template>

<script>
    import saveDialog from './save.vue'

    export default {
        name: 'notice',
        components: {
            saveDialog
        },
        data() {
            return {
                dialog: {
                    save: false
                },
                selection: [],
                search: {
                    title: null,
                    noticeType: null,
                },
                dataList: this.$API.system.notice.page
            }
        },
        methods: {
            // 添加
            add() {
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open();
                })
            },
            // 批量删除
            batchDel() {
                this.$confirm(`确定删除选中的` + this.selection.length + `项数据吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    const idList = [];
                    this.selection.forEach(e => idList.push(e.id));
                    const reqData = {idList: idList};
                    this.$API.system.notice.remove.delete(reqData).then(() => {
                        this.$refs.table.refresh();
                        this.$message.success("删除成功");
                    })
                    loading.close();
                })
            },
            // 查看
            tableShow(row) {
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row);
                })
            },
            // 编辑
            tableEdit(row) {
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row);
                })
            },
            // 删除
            tableDel(row) {
                const reqData = {idList: [row.id]};
                this.$API.system.notice.remove.delete(reqData).then(() => {
                    this.$refs.table.refresh();
                    this.$message.success("删除成功");
                })
            },
            // 搜索
            upSearch() {
                this.$refs.table.upData(this.search);
            },
            // 重置
            resetSearch() {
                this.search.title = null;
                this.search.noticeType = null;
                this.$refs.table.upData(this.search);
            },
            // 表格选择后回调事件
            selectionChange(selection) {
                this.selection = selection;
            },
            // 列表刷新
            refreshTable() {
                this.$refs.table.refresh();
            }
        }
    }
</script>

<style>
</style>
